<template>
    <div id="hz" ref="hz">
        <div class="dt" id="d1">11</div>
        <div class="dt" id="d2">22</div>
        <div class="dt" id="d3">33</div>
        <div class="dt" id="d4">44</div>
        <div class="dt" id="d5">55</div>        

    </div>
</template>
<script setup>
// import {ref,reactive} from "vue"
useHead({
    title: '3D',
    meta: [
        { name: 'description', content: 'My amazing site.' }
    ],
    bodyAttrs: {
        class: 'test'
    },
    //   script: [ { children: 'console.log(\'Hello world\')' } ]
})

let hz = ref()



</script>
<style>
#hz{
    /* display: flex; */
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.dt{
    /* flex: 1; */
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: absolute;
    
}
#d1{
    background-color: aqua;

}
#d2{
    background-color: blanchedalmond;
    top:50px
}
#d3{
    background-color: cadetblue;
    top: 70px;
}
#d4{
    background-color: chocolate;
    top: 90px;
}
#d5{
    background-color:blue;
    top: 130px;
}
</style>